<template>
  <div class="container">
    <view class="base-info">
      <img class="userinfo-avatar"
           :src="user.base?user.base.avatarUrl:'/static/images/component/heartbeat-active.png'"
           mode="aspectFill" background-size="cover" @click="auth"/>
      <text class="nickName">{{user.base?user.base.nickName:'请点击登录'}}</text>
      <img class="user-gender" v-if="user.detail"
           :src="user.detail.gender=='男'?'/static/images/component/sex_m.png':'/static/images/component/sex_w.png'"/>
    </view>
    <view class="bus-info">
      <div class="bus-item" @click="itemClick('datum')">
        <view class="icon"><img src="/static/images/component/datum-icon.png"/></view>
        <view class="text">资料</view>
      </div>
      <div class="bus-item" @click="itemClick('photo')">
        <view class="icon"><img src="/static/images/component/photo-icon.png"/></view>
        <view class="text">相册</view>
      </div>
      <div class="bus-item">
        <view class="icon"><img src="/static/images/component/favorite-icon.png"/></view>
        <view class="text">收藏</view>
      </div>
      <div class="bus-item" @click="itemClick('love')">
        <view class="icon"><img src="/static/images/component/love-icon.png"/></view>
        <view class="text">喜欢</view>
      </div>
    </view>
  </div>

</template>

<script>

  export default {
    components: {},

    data() {
      return {}
    },
    computed: {
      user() {
        return this.$store.state.user
      }
    },
    methods: {
      auth() {
        if (!this.user.base) {
          this.$openWin('/pages/auth/main');
        }
      },
      itemClick(flag) {
        if (!this.user.base) {
          this.$openWin('/pages/auth/main');
          return;
        }
        switch (flag) {
          case 'datum':
            this.$openWin('/pages/complete/main');
            break;
          case 'photo':
            this.$openWin('/pages/photo/main');
            break;
          case 'favorite':
            break;
          case 'love':
            this.$openWin('/pages/love/main');
            break;
        }
      }
    },
    onShow() {
      console.log(this.user);
      wx.setNavigationBarTitle({title: '我的'})
      if (this.user.base) {
        //调用登录接口
        var that = this;
        wx.login({
          success: function () {
            wx.getUserInfo({
              success: function (res) {
                that.$store.commit('updateBaseInfo', res.userInfo);
                wx.cloud.callFunction({
                  name: 'updateUserBase',
                  data: {
                    openid: that.user.openid,
                    base: that.user.base
                  },
                  success: res => {
                    console.log('更新成功')
                  },
                  fail: res => {
                    console.log(res)
                  }
                })
              }
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100vh;
    background-color: #F7F7F7;
    overflow: hidden;
  }

  .base-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30vh;
    background-color: skyblue;
  }

  .userinfo-avatar {
    position: absolute;
    top: 8vh;
    left: 5vh;
    width: 14vh;
    height: 14vh;
    border-radius: 50%;
    background-color: hotpink;
    z-index: 100;
  }

  .nickName {
    position: absolute;
    top: 10vh;
    left: 20vh;
    font-size: 3vh;
    font-family: PingFang-SC;
    color: white;
  }

  .user-gender {
    position: absolute;
    top: 15vh;
    left: 20vh;
    width: 3vh;
    height: 3vh;
  }

  .user-age {
    position: absolute;
    top: 11vh;
    left: 22vh;
    color: white;
    font-size: 2vh;
  }

  .bus-info {
    position: absolute;
    top: 25vh;
    left: 2%;
    width: 96%;
    height: 30vh;
    background-color: white;
    border-radius: 2vh;
  }

  .bus-item {
    float: left;
    width: 23vw;
    height: 100%;
    border: none;
    margin-left: 1vw;
  }

  .icon {
    float: top;
    margin-top: 50%;
    width: 100%;
  }

  .bus-info img {
    margin-left: 6.5vw;
    width: 10vw;
    height: 10vw;
  }

  .text {
    float: top;
    width: 100%;
    text-align: center;
    font-size: 5vw;
    color: rgba(0, 0, 0, 0.8);
    font-family: PingFang-SC;
  }
</style>
